<template>
	<div class="hello">
		<div style="width: 600px;margin: 0 auto;">
			<el-input v-model='form.username' placeholder="6位以上的数字、字母或符号组合"></el-input>
			<el-input v-model='form.password' placeholder="6位以上的数字、字母或符号组合"></el-input>
			<el-input v-model='form.email' placeholder="email"></el-input>
			<el-input v-model='form.phone' placeholder="phone"></el-input>
			<el-input v-model='form.nickname' placeholder="nickname"></el-input>
			<el-input v-model='form.perm' placeholder="perm"></el-input>
			<el-input v-model='form1.name' placeholder="图片名称"></el-input>
			<el-input v-model='form1.target' placeholder="跳转目标"></el-input>
		</div>
		<el-button @click="login">登录</el-button>
		<el-button @click="register">注册</el-button>
		<el-button @click="profile">测试token</el-button>

		<!-- :on-exceed="handleExceed" :on-preview="handlePreview"-->
		<el-upload class="upload-demo" action="/api/banner/add" :limit="1" ref="upload" :auto-upload="false"
			:file-list="fileList" :data="form1" :on-success="handlerSuccess" :on-exceed="handleExceed">
			<el-button size="small" type="primary">点击上传</el-button>
			<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
		</el-upload>
		<el-button @click='submitUpload'>提交数据</el-button>
	</div>
</template>

<script>
// let id = 0;
export default {
	name: 'HelloWorld',
	data() {
		return {
			form: {},
			form1: {},
			bannerList: [],
			fileList: [],
			img: ''
		}
	},
	created() {
	},
	methods: {
		submitUpload() {
			this.$refs.upload.submit();
		},
		handlerSuccess(response, file, fileLis) {
			console.log(response, file, fileLis);
			if (response.status === 200) {
				this.$message({
					message: '数据添加成功',
					type: 'success'
				});
			}
		},
		handleExceed() {
			this.$message({
				showClose: true,
				message: '每次只允许上传一张图片',
				type: 'warning'
			});
		},
		getBannerList() {
			this.$http.get('/banner').then(res => {
				console.log(res);
			})
		},
		login() {
			// console.log(this.form);
			// this.$http.post('/users/login', this.form).then(res => {
			// 	console.log(res);
			// 	// sessionStorage.setItem('token', res.data.token)
			// })
			this.$http.get('/banner/login', {
				params: {
					name: this.form.username
				}
			}).then(res => {
				console.log(res);
				// sessionStorage.setItem('token', res.data.token)
			})
		},
		register() {
			// this.$http.post('/users/register', this.form).then(res => {
			// 	console.log(res);
			// })
			this.$http.post('/banner', this.form).then(res => {
				console.log(res);
			})
		},
		// 获取数据
		profile() {
			this.$http.get('/users/protected').then(res => {
				console.log(res);
			})
		},
		lazyLoad(node, resolve) {
			console.log(node);
			this.$http.get('/area', {
				params: {
					id: node.value
				}
			}).then(data => {
				resolve(data.data)
			})
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
	margin: 40px 0 0;
}

ul {
	list-style-type: none;
	padding: 0;
}

li {
	display: inline-block;
	margin: 0 10px;
}

a {
	color: #42b983;
}
</style>
